<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页 - 学平险投保</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="../css/styles.css" rel="stylesheet">
    <style>
        /* 确保基础样式在外部资源加载失败时也能正常显示 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.5;
            color: #333333;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }
        
        .page-container {
            padding: 16px;
            padding-bottom: 70px;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .card {
            background: white;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        
        .btn {
            display: inline-block;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
            text-decoration: none;
        }
        
        .btn-primary {
            background-color: #1890ff;
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #40a9ff;
        }
        
        .btn-block {
            display: block;
            width: 100%;
        }
        
        .nav-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
            z-index: 100;
        }
        
        .nav-bar .grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 8px 0;
            color: #666;
            text-decoration: none;
            font-size: 12px;
        }
        
        .nav-item.active {
            color: #1890ff;
        }
        
        .nav-item i {
            font-size: 20px;
            margin-bottom: 4px;
        }
        
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
        
        .modal-content {
            background: white;
            border-radius: 16px;
            padding: 24px;
            max-width: 90%;
            max-height: 80vh;
            overflow-y: auto;
        }
        
        /* 响应式设计优化 */
        @media screen and (max-width: 480px) {
            .page-container {
                padding: 12px;
                padding-bottom: 70px;
            }
            
            .card {
                padding: 12px;
                margin-bottom: 12px;
            }
            
            .modal-content {
                padding: 16px;
                max-width: 95%;
            }
        }
    </style>
    <style>
        .notice-content {
            max-height: 60vh;
            overflow-y: auto;
            padding-right: 16px;
            /* 自定义滚动条样式 */
            scrollbar-width: thin;
            scrollbar-color: #1890ff #f0f0f0;
        }
        
        .notice-content::-webkit-scrollbar {
            width: 6px;
        }
        
        .notice-content::-webkit-scrollbar-track {
            background: #f0f0f0;
            border-radius: 3px;
        }
        
        .notice-content::-webkit-scrollbar-thumb {
            background-color: #1890ff;
            border-radius: 3px;
        }

        .important-text {
            font-weight: bold;
            color: #000000;
        }

        .warning-text {
            font-weight: bold;
            color: #ff4d4f;
        }

        /* 文档弹窗样式 */
        .document-modal .modal-content {
            width: 92%;
            max-width: 540px;
            padding: 20px;
            background: #fff;
            border-radius: 16px;
        }

        .document-content {
            max-height: 75vh;
            overflow-y: auto;
            padding: 0 16px 16px;
            font-size: 14px;
            line-height: 1.8;
            color: #333;
            scrollbar-width: thin;
            scrollbar-color: #1890ff #f0f0f0;
        }

        .document-content::-webkit-scrollbar {
            width: 4px;
        }

        .document-content::-webkit-scrollbar-track {
            background: #f0f0f0;
            border-radius: 2px;
        }

        .document-content::-webkit-scrollbar-thumb {
            background-color: #1890ff;
            border-radius: 2px;
        }

        .document-content h3 {
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            margin: 0 0 20px;
            padding: 0 0 12px;
            border-bottom: 1px solid #eee;
            color: #222;
        }

        .document-content .section {
            margin-bottom: 16px;
        }

        .document-content .section-title {
            font-weight: 500;
            margin-bottom: 8px;
            color: #222;
        }

        .document-content p {
            margin-bottom: 12px;
            text-indent: 2em;
            line-height: 1.8;
        }

        .document-content .indent-none {
            text-indent: 0;
        }

        .document-content .text-right {
            text-align: right;
        }

        .document-content .signature-area {
            margin-top: 24px;
            padding-top: 16px;
            border-top: 1px dashed #eee;
        }

        .document-content .signature-line {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-bottom: 12px;
            color: #666;
        }

        .document-content .signature-line > div:first-child {
            color: #333;
            margin-right: 8px;
        }

        .document-content .signature-line > div:last-child {
            min-width: 160px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 4px;
            text-align: center;
            color: #999;
        }

        .document-content .customer-receipt {
            margin-top: 24px;
            padding-top: 20px;
            border-top: 1px solid #eee;
        }

        .document-content .customer-receipt h4 {
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 16px;
            color: #222;
        }

        .document-content .checkbox-item {
            display: inline-block;
            margin: 0 16px;
            white-space: nowrap;
        }

        .document-content .checkbox-item.checked {
            color: var(--primary-color);
        }

        .btn-close {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 8px 24px;
            font-size: 14px;
            font-weight: 500;
            border-radius: 6px;
            transition: all 0.3s;
            background: var(--primary-color);
            color: white;
            border: none;
            cursor: pointer;
        }

        .btn-close:hover {
            background: #40a9ff;
        }

        /* 自定义下拉框样式 */
        .custom-select {
            position: relative;
        }

        .select-input {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 16px;
            background-color: white;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .select-input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
            outline: none;
        }

        .select-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: white;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            margin-top: 4px;
            max-height: 300px;
            overflow-y: auto;
            z-index: 1000;
            display: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        .select-dropdown.active {
            display: block;
        }

        .select-search {
            padding: 8px;
            position: sticky;
            top: 0;
            background: white;
            border-bottom: 1px solid var(--border-color);
        }

        .select-search input {
            width: 100%;
            padding: 8px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 14px;
        }

        .select-options {
            padding: 8px 0;
        }

        .select-option {
            padding: 8px 12px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .select-option:hover {
            background-color: #f5f5f5;
        }

        .select-option.selected {
            background-color: #e6f7ff;
            color: var(--primary-color);
        }

        .select-option.disabled {
            color: #ccc;
            cursor: not-allowed;
        }

        /* 下拉箭头 */
        .select-arrow {
            border: solid #666;
            border-width: 0 2px 2px 0;
            display: inline-block;
            padding: 3px;
            transform: rotate(45deg);
            transition: transform 0.3s;
        }

        .select-input.active .select-arrow {
            transform: rotate(-135deg);
        }

        /* 文档弹窗样式优化 */
        .document-modal .modal-content {
            position: relative;
            padding: 20px 20px 80px; /* 调整内容区域的内边距 */
            max-height: 90vh; /* 增加最大高度 */
            display: flex;
            flex-direction: column;
        }

        .document-content {
            flex: 1;
            overflow-y: auto;
            padding: 0 16px 20px; /* 增加底部内边距 */
            margin-bottom: 0; /* 移除底部外边距 */
        }

        /* 固定浮动的关闭按钮 */
        .document-modal .btn-wrapper {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 15px 20px;
            background: white;
            border-top: 1px solid #eee;
            text-align: center;
            border-radius: 0 0 16px 16px;
            z-index: 10; /* 确保按钮在最上层 */
        }

        /* 为底部签名区域添加额外的下边距，确保不被按钮遮挡 */
        .document-content .signature-area {
            margin-bottom: 20px; /* 增加底部外边距 */
        }

        /* 调整滚动条样式 */
        .document-content::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }

        .document-content::-webkit-scrollbar-track {
            background: #f0f0f0;
            border-radius: 2px;
            margin: 4px 0; /* 添加滚动条轨道的边距 */
        }

        .document-content::-webkit-scrollbar-thumb {
            background-color: #1890ff;
            border-radius: 2px;
        }

        /* 优化按钮样式 */
        .btn-close {
            min-width: 120px;
            height: 36px;
            line-height: 36px;
            padding: 0 24px;
            font-size: 14px;
            border-radius: 18px; /* 使用圆角按钮 */
            box-shadow: 0 2px 4px rgba(24, 144, 255, 0.2); /* 添加轻微阴影 */
        }

        .btn-close:hover {
            background: #40a9ff;
            box-shadow: 0 4px 8px rgba(24, 144, 255, 0.3);
        }
    </style>
</head>
<body>
    <!-- 重要告知弹窗 -->
    <div class="modal" id="noticeModal" style="display: flex;">
        <div class="modal-content">
            <h3 class="modal-title">重要告知</h3>
            <div class="notice-content text-sm text-gray-700 space-y-4">
                <p>1、本投保信息登记，用于世纪保险经纪股份有限公司吉林分公司指定"客户资金专用账户"预收保险费。投保信息传递至保险公司审核通过后，予以承保；审核未通过的，将不予承保，同时您预交的保费资金如数原路退还。</p>
                <p>2、学生综合保障计划<span class="important-text">不是强制性保险</span>，为保障您的合法权益，请依据您的需要<span class="important-text">确认是否选择自愿购买</span>。</p>
                <p>3、本平台展示的产品由世纪保险经纪股份有限公司吉林分公司提供保险经纪服务，提供承保公司如下（排名不分先后）：</p>
                <div class="text-xs leading-relaxed pl-4">
                    中国大地财产保险股份有限公司白城中心支公司 /
                    中国大地财产保险股份有限公司吉林分公司 /
                    中国大地财产保险股份有限公司长春支公司 /
                    中国平安财产保险股份有限公司吉林分公司 /
                    中国人寿保险股份有限公司吉林分公司 /
                    中国人寿保险股份有限公司白城分公司 /
                    中国人寿保险股份有限公司延边朝鲜族自治州分公司 /
                    中国人民财产保险股份有限公司吉林省分公司 /
                    中国人民财产保险股份有限公司白城分公司 /
                    中华联合财产保险股份有限公司白城中心支公司 /
                    中国人民健康保险股份有限公司吉林省分公司 /
                    中国人民人寿保险股份有限公司延边分公司 /
                    太平洋财产保险股份有限公司延边分公司 等
                </div>
                <p class="warning-text">温馨提示：本服务内容依法依规全程设有国家金融监管部门规定的可追溯记录监管要求。</p>
            </div>
            <div class="mt-6 flex justify-between">
                <button class="btn">不同意</button>
                <button class="btn btn-primary" onclick="agreeNotice()">同意</button>
            </div>
        </div>
    </div>

    <!-- 授权委托书弹窗 -->
    <div class="modal document-modal" id="authModal" style="display: none;">
        <div class="modal-content">
            <div class="document-content">
                <h3>授权委托书</h3>
                <p>本人/本机构已充分了解本保险产品，并授权世纪保险经纪股份有限公司作为本人/本机构的保险经纪人，委托其代为办理保险相关事宜。</p>
                
                <div class="section">
                    <div class="section-title">一、授权委托事项：</div>
                    <p>1、代为办理投保相关事宜，包括但不限于代为提交投保单证、代为解释投保单证、代为转递保险费、代为转递保单等；</p>
                    <p>2、代为办理保全相关事宜，包括但不限于代为申请保全项目、代为解释保全文件、代为转递保全文件等；</p>
                    <p>3、代为办理理赔相关事宜，包括但不限于代为申请理赔、代为解释理赔文件、代为转递理赔文件等；</p>
                    <p>4、代为办理咨询、投诉相关事宜，包括但不限于代为咨询、代为投诉、代为解释相关文件、代为转递相关文件等。</p>
                </div>

                <div class="section">
                    <div class="section-title">二、授权委托期限：</div>
                    <p>自本授权委托书签署之日起至保险合同终止之日止。</p>
                </div>

                <div class="section">
                    <div class="section-title">三、本人/本机构已知晓并同意：</div>
                    <p>1、本人/本机构已经仔细阅读并完全理解本授权委托书的全部内容；</p>
                    <p>2、本人/本机构同意世纪保险经纪股份有限公司依据本授权委托书的授权内容行使相关权利；</p>
                    <p>3、本人/本机构同意世纪保险经纪股份有限公司依据本授权委托书的授权内容代为办理相关事宜；</p>
                    <p>4、本人/本机构同意世纪保险经纪股份有限公司依据本授权委托书的授权内容代为签署相关文件。</p>
                </div>

                <div class="signature-area">
                    <div class="signature-line">
                        <div>委托人（签字/盖章）：</div>
                        <div>_________________</div>
                    </div>
                    <div class="signature-line">
                        <div>日期：</div>
                        <div>_____年___月___日</div>
                    </div>
                </div>
            </div>
            <div class="btn-wrapper">
                <button class="btn-close" onclick="closeModal('authModal')">关闭</button>
            </div>
        </div>
    </div>

    <!-- 客户告知书弹窗 -->
    <div class="modal document-modal" id="noticeDocModal" style="display: none;">
        <div class="modal-content">
            <div class="document-content">
                <h3>客户告知书</h3>
                <p class="indent-none">尊敬的客户：</p>
                <p>感谢您委托我公司代为办理保险业务。本公司是基于投保人的利益，为投保人与保险公司订立保险合同提供中介服务的保险专业中介机构。为了保护您的合法权益，按照《保险经纪人监管规定》的要求，本公司应履行客户告知义务，现将有关事项告知如下，请您仔细阅读，并在回执处予以认可：</p>

                <div class="section">
                    <div class="section-title">一、公司基本情况</div>
                    <p class="indent-none">（一）公司名称：</p>
                    <p class="indent-none">（二）营业场所：</p>
                    <p class="indent-none">（三）机构编码：</p>
                    <p class="indent-none">（四）许可证有效期止：2026年6月9日</p>
                    <p class="indent-none">（五）业务范围：在全国区域内（港、澳、台除外）为投保人拟订投保方案、选择保险人、办理投保手续；协助被保险人或受益人进行索赔；再保险经纪业务；为委托人提供防灾、防损或风险评估、风险管理咨询服务；国家金融监督管理部门批准的其他业务。</p>
                    <p class="indent-none">（六）联系电话：</p>
                </div>

                <div class="section">
                    <p>二、根据保险监管部门的规定，只有做了保险经纪业人员执业登记的人员方可从事保险经纪业务，您可要求本公司业务人员出示保险经纪从业人员执业登记信息，并可通过登录国家金融监督管理总局中介监管信息系统查询业务人员持证情况（http://www.insurcloud.com.cn）；</p>
                    <p>三、本公司已按照《保险经纪人监管规定》投保了职业责任保险；</p>
                    <p>四、本公司及高级管理人员与经纪业务相关的保险公司、其他保险中介机构不存在关联关系；</p>
                    <p>五、本公司从业人员会根据您的保险需求与风险承受能力等情况，在客观分析市场上同类保险产品的基础上，为您推荐符合其利益的保险产品；</p>
                    <p>六、本公司从业人员会按照国家金融监督管理总局的要求向您披露保险产品相关信息。同时，请您仔细阅读保险条款，重点关注保险责任、责任免除、投保人权利义务、免赔额或免赔率的计算等内容。您可以要求本公司从业人员对上述内容进行详细讲解。</p>
                    <p>七、请您向本公司业务人员了解《中华人民共和国保险法》等法律法规规定中对于保险期限效力、保险公司理赔时限、合同中止、终止失效、保险标的转让、重复保险等相关规定，以及不履行如实告知义务、故意制造保险事故或者发生重大事故损失等情形导致的法律后果。</p>
                </div>

                <div class="section">
                    <div class="section-title">八、您同意本公司就本项目通过以下方式收取费用：</div>
                    <p class="indent-none">（一）向保险公司收取佣金 <span class="checkbox-item checked">☑ 是</span> <span class="checkbox-item">□ 否</span></p>
                    <p class="indent-none">（二）向您收取咨询费/服务费 <span class="checkbox-item">□ 是</span> <span class="checkbox-item checked">☑ 否</span></p>
                </div>

                <div class="section">
                    <p>九、根据《中华人民共和国保险法》的规定，因保险经纪人过错给投保人、被保险人和受益人造成损失的，依法承担赔偿责任。</p>
                    <p>十、如果您发现本公司从业人员存在误导行为及其他损害您合法权益的行为，请注意保留相关证据，可向本公司进行投诉，投诉电话：010-83416796；发生争议时，双方应及时协商解决，协商不成的，您可以向本公司所在地人民法院提起诉讼。</p>
                </div>

                <div class="signature-area">
                    <div class="text-right mb-4">
                        <div>保险经纪机构名称（盖章）</div>
                    </div>
                    <div class="signature-line">
                        <div>经办业务人员：</div>
                        <div>_________________</div>
                    </div>
                    <div class="signature-line">
                        <div>联系电话：</div>
                        <div>_________________</div>
                    </div>
                    <div class="signature-line">
                        <div>日期：</div>
                        <div>_____年___月___日</div>
                    </div>
                </div>

                <div class="customer-receipt">
                    <h4>客户回执</h4>
                    <p class="indent-none">本人/本机构已阅知上述客户告知书内容。</p>
                    <div class="signature-area" style="border-top: none; padding-top: 0;">
                        <div class="signature-line">
                            <div>客户名称（签字或盖章）：</div>
                            <div>_________________</div>
                        </div>
                        <div class="signature-line">
                            <div>联系人：</div>
                            <div>_________________</div>
                        </div>
                        <div class="signature-line">
                            <div>电话：</div>
                            <div>_________________</div>
                        </div>
                        <div class="signature-line">
                            <div>日期：</div>
                            <div>_____年___月___日</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="btn-wrapper">
                <button class="btn-close" onclick="closeModal('noticeDocModal')">关闭</button>
            </div>
        </div>
    </div>

    <div class="page-container">
        <!-- 地区选择 -->
        <div class="card">
            <h2 class="text-lg font-bold mb-4">选择地区</h2>
            <div class="form-group">
                <label class="form-label required">所在城市</label>
                <div class="custom-select" id="citySelect">
                    <div class="select-input" tabindex="0">
                        <span class="select-value">请选择城市</span>
                        <span class="select-arrow"></span>
                    </div>
                    <div class="select-dropdown">
                        <div class="select-search">
                            <input type="text" placeholder="搜索城市" oninput="searchOptions('city')">
                        </div>
                        <div class="select-options"></div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="form-label required">所在地区</label>
                <div class="custom-select" id="districtSelect">
                    <div class="select-input" tabindex="0">
                        <span class="select-value">请先选择城市</span>
                        <span class="select-arrow"></span>
                    </div>
                    <div class="select-dropdown">
                        <div class="select-search">
                            <input type="text" placeholder="搜索地区" oninput="searchOptions('district')">
                        </div>
                        <div class="select-options"></div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="form-label required">选择学校</label>
                <div class="custom-select" id="schoolSelect">
                    <div class="select-input" tabindex="0">
                        <span class="select-value">请先选择地区</span>
                        <span class="select-arrow"></span>
                    </div>
                    <div class="select-dropdown">
                        <div class="select-search">
                            <input type="text" placeholder="搜索学校" oninput="searchOptions('school')">
                        </div>
                        <div class="select-options"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 重要提示 -->
        <div class="card mt-4">
            <h3 class="text-lg font-bold mb-3">重要提示</h3>
            <div class="space-y-3 text-sm">
                <p>1、请审慎 <span class="text-error font-bold">选择</span> 学生 <span class="text-error font-bold">新学期就读的学校和所在的班级</span>，确保个人信息真实准确，以免影响保单生效或后续理赔服务。</p>
                <p>2、您即将进入投保流程，请您在后续仔细阅读涉及到的《投保须知》和《保险条款》等信息，重点关注免责事项。</p>
                <p>3、我声明：我已仔细阅读 <a href="javascript:void(0)" class="link" onclick="showDocument('auth')">《授权委托书》</a> 和 <a href="javascript:void(0)" class="link" onclick="showDocument('notice')">《客户告知书》</a> 中的告知事项，授权世纪保险经纪股份有限公司作为本人的保险经纪人，并委托其协助办理本人的保险相关事宜。</p>
            </div>
        </div>

        <button class="btn btn-primary btn-block mt-6" onclick="submitSelection()">提交</button>
    </div>

    <!-- 底部导航 -->
    <nav class="nav-bar">
        <div class="grid grid-cols-4 gap-2">
            <a href="home.html" class="nav-item active">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </a>
            <a href="consultation.html" class="nav-item">
                <i class="fas fa-comments"></i>
                <span>问题咨询</span>
            </a>
            <a href="claim-guide.html" class="nav-item">
                <i class="fas fa-file-alt"></i>
                <span>我要理赔</span>
            </a>
            <a href="my-orders.html" class="nav-item">
                <i class="fas fa-user"></i>
                <span>我的订单</span>
            </a>
        </div>
    </nav>

    <script>
        // 地区数据
        const areaData = {
            changchun: ['南关区', '宽城区', '朝阳区', '二道区', '绿园区', '双阳区', '九台区', '农安县', '德惠市', '榆树市'],
            jilin: ['昌邑区', '龙潭区', '船营区', '丰满区', '永吉县', '蛟河市', '桦甸市', '舒兰市', '磐石市'],
            siping: ['铁西区', '铁东区', '梨树县', '伊通满族自治县', '公主岭市', '双辽市'],
            liaoyuan: ['龙山区', '西安区', '东丰县', '东辽县'],
            tonghua: ['东昌区', '二道江区', '通化县', '辉南县', '柳河县', '梅河口市', '集安市'],
            baishan: ['浑江区', '江源区', '抚松县', '靖宇县', '长白朝鲜族自治县', '临江市'],
            songyuan: ['宁江区', '前郭尔罗斯蒙古族自治县', '长岭县', '乾安县', '扶余市'],
            baicheng: ['洮北区', '镇赉县', '通榆县', '洮南市', '大安市'],
            yanbian: ['延吉市', '图们市', '敦化市', '珲春市', '龙井市', '和龙市', '汪清县', '安图县']
        };

        // 当前选中的值
        const selectedValues = {
            city: '',
            district: '',
            school: ''
        };

        // 初始化下拉选择器
        function initializeSelects() {
            // 初始化城市选择器
            const citySelect = document.getElementById('citySelect');
            const cityInput = citySelect.querySelector('.select-input');
            const cityOptions = Object.keys(areaData).map(key => ({
                value: key,
                label: getCityLabel(key)
            }));

            // 绑定点击事件
            cityInput.addEventListener('click', () => toggleDropdown('citySelect'));
            
            // 初始化地区和学校选择器的点击事件
            document.getElementById('districtSelect').querySelector('.select-input')
                .addEventListener('click', () => toggleDropdown('districtSelect'));
            document.getElementById('schoolSelect').querySelector('.select-input')
                .addEventListener('click', () => toggleDropdown('schoolSelect'));

            // 渲染城市选项
            renderOptions('city', cityOptions);

            // 点击其他地方关闭下拉框
            document.addEventListener('click', (e) => {
                if (!e.target.closest('.custom-select')) {
                    closeAllDropdowns();
                }
            });
        }

        // 切换下拉框显示状态
        function toggleDropdown(selectId) {
            const select = document.getElementById(selectId);
            const input = select.querySelector('.select-input');
            const dropdown = select.querySelector('.select-dropdown');
            
            // 如果是禁用状态，不执行任何操作
            if (input.classList.contains('disabled')) {
                return;
            }

            // 关闭其他下拉框
            closeAllDropdowns();

            // 切换当前下拉框
            input.classList.toggle('active');
            dropdown.classList.toggle('active');

            // 如果打开下拉框，聚焦搜索框
            if (dropdown.classList.contains('active')) {
                dropdown.querySelector('input').focus();
            }
        }

        // 关闭所有下拉框
        function closeAllDropdowns() {
            document.querySelectorAll('.custom-select').forEach(select => {
                select.querySelector('.select-input').classList.remove('active');
                select.querySelector('.select-dropdown').classList.remove('active');
            });
        }

        // 搜索选项
        function searchOptions(type) {
            const select = document.getElementById(type + 'Select');
            const searchInput = select.querySelector('.select-search input');
            const searchText = searchInput.value.toLowerCase();
            
            let options = [];
            if (type === 'city') {
                options = Object.keys(areaData).map(key => ({
                    value: key,
                    label: getCityLabel(key)
                }));
            } else if (type === 'district' && selectedValues.city) {
                options = areaData[selectedValues.city].map(district => ({
                    value: district,
                    label: district
                }));
            } else if (type === 'school' && selectedValues.district) {
                options = generateSchools(selectedValues.district);
            }

            // 过滤选项
            const filteredOptions = options.filter(option => 
                option.label.toLowerCase().includes(searchText)
            );

            // 重新渲染选项
            renderOptions(type, filteredOptions);
        }

        // 渲染选项
        function renderOptions(type, options) {
            const select = document.getElementById(type + 'Select');
            const optionsContainer = select.querySelector('.select-options');
            
            optionsContainer.innerHTML = options.map(option => `
                <div class="select-option ${selectedValues[type] === option.value ? 'selected' : ''}"
                     data-value="${option.value}"
                     onclick="selectOption('${type}', '${option.value}', '${option.label}')">
                    ${option.label}
                </div>
            `).join('');
        }

        // 选择选项
        function selectOption(type, value, label) {
            selectedValues[type] = value;
            
            const select = document.getElementById(type + 'Select');
            select.querySelector('.select-value').textContent = label;
            
            // 关闭当前下拉框
            closeAllDropdowns();

            // 更新下级选择器
            if (type === 'city') {
                updateDistrict();
                resetSchool();
            } else if (type === 'district') {
                updateSchool();
            }
        }

        // 更新地区选择器
        function updateDistrict() {
            const districtSelect = document.getElementById('districtSelect');
            const input = districtSelect.querySelector('.select-input');
            const value = districtSelect.querySelector('.select-value');

            if (selectedValues.city) {
                input.classList.remove('disabled');
                value.textContent = '请选择地区';
                const options = areaData[selectedValues.city].map(district => ({
                    value: district,
                    label: district
                }));
                renderOptions('district', options);
            } else {
                input.classList.add('disabled');
                value.textContent = '请先选择城市';
                renderOptions('district', []);
            }
        }

        // 更新学校选择器
        function updateSchool() {
            const schoolSelect = document.getElementById('schoolSelect');
            const input = schoolSelect.querySelector('.select-input');
            const value = schoolSelect.querySelector('.select-value');

            if (selectedValues.district) {
                input.classList.remove('disabled');
                value.textContent = '请选择学校';
                const options = generateSchools(selectedValues.district);
                renderOptions('school', options);
            } else {
                input.classList.add('disabled');
                value.textContent = '请先选择地区';
                renderOptions('school', []);
            }
        }

        // 重置学校选择器
        function resetSchool() {
            selectedValues.school = '';
            const schoolSelect = document.getElementById('schoolSelect');
            const input = schoolSelect.querySelector('.select-input');
            const value = schoolSelect.querySelector('.select-value');
            
            input.classList.add('disabled');
            value.textContent = '请先选择地区';
            renderOptions('school', []);
        }

        // 生成示例学校列表
        function generateSchools(district) {
            return Array.from({ length: 5 }, (_, i) => ({
                value: `school${i + 1}`,
                label: `${district}第${i + 1}中学`
            }));
        }

        // 获取城市显示名称
        function getCityLabel(key) {
            const cityNames = {
                changchun: '长春市',
                jilin: '吉林市',
                siping: '四平市',
                liaoyuan: '辽源市',
                tonghua: '通化市',
                baishan: '白山市',
                songyuan: '松原市',
                baicheng: '白城市',
                yanbian: '延边朝鲜族自治州'
            };
            return cityNames[key] || key;
        }

        // 显示弹窗
        function showModal(id) {
            document.getElementById(id).style.display = 'flex';
        }

        // 关闭弹窗
        function closeModal(id) {
            document.getElementById(id).style.display = 'none';
        }

        // 同意重要告知
        function agreeNotice() {
            closeModal('noticeModal');
            // 这里可以添加其他逻辑
        }

        // 显示文档
        function showDocument(type) {
            // 先关闭所有弹窗
            closeAllModals();
            
            // 显示对应的文档弹窗
            if (type === 'auth') {
                showModal('authModal');
            } else {
                showModal('noticeDocModal');
            }
        }

        // 关闭所有弹窗
        function closeAllModals() {
            document.querySelectorAll('.modal').forEach(modal => {
                modal.style.display = 'none';
            });
        }

        // 提交选择
        function submitSelection() {
            if (!selectedValues.city || !selectedValues.district || !selectedValues.school) {
                alert('请完整填写所有必填项');
                return;
            }

            // 跳转到投保信息填写页
            window.location.href = 'insurance-form.html';
        }

        // 页面加载完成后的初始化
        window.onload = function() {
            initializeSelects();
            
            // 初始化弹窗状态
            document.querySelectorAll('.modal').forEach(modal => {
                if (modal.id === 'noticeModal') {
                    modal.style.display = 'flex'; // 只显示重要告知弹窗
                } else {
                    modal.style.display = 'none'; // 隐藏其他弹窗
                }
            });
        }
    </script>
</body>
</html> 